<!--
 * @Author: “张矗” “1279074338@qq.com”
 * @Date: 2023-11-05 13:43:24
 * @LastEditors: “张矗” “1279074338@qq.com”
 * @LastEditTime: 2023-11-09 10:15:13
 * @FilePath: \pn\src\views\zhangchu\TicketGrabbing\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <div>
            <van-nav-bar title="填写抢票信息" left-arrow @click-left="onClickLeft" />
        </div>
        <!-- 出发地切换 -->
        <div class="Address-switching">

            <div class="switchingbox">
                <div class="place-of-departure">
                    <div style="font-size: .4rem;">出发地</div>
                    <div style="font-size: .66rem;">北京</div>
                </div>
                <div><van-icon class-prefix="icon" name="zhuanhuan"></van-icon>
                </div>

                <div class="destination">
                    <div style="font-size: .4rem;">到达地</div>
                    <div style="font-size: .66rem;">上海</div>
                </div>
            </div>
        </div>

        <!-- 选项 -->
        <div class="cut-bigbox">
            <div class="cut-smallbox">
                <div class="cutboxs">
                    <div style="color: #b0b0b0;">出发日期</div>
                    <!-- 具体日期显示 -->
                    <div>11月15日</div>
                    <div></div>
                    <div style="color: #00C9E2; display: flex; font-size: .3rem;">
                        <div>多选</div>
                        <div style="color: #b0b0b0;"><van-icon class-prefix="icon" name="youjiantou"></van-icon></div>
                    </div>
                </div>
                <div class="cutboxs">
                    <div style="color: #b0b0b0;">指定车次</div>
                    <div></div>
                    <div style="color: #00C9E2; display: flex; font-size: .3rem;">
                        <div>多选</div>
                        <div style="color: #b0b0b0;"><van-icon class-prefix="icon" name="youjiantou"></van-icon></div>
                    </div>
                </div>
                <div class="cutboxs">
                    <div style="color: #b0b0b0;">优先坐席</div>
                    <div></div>
                    <div style="color: #00C9E2; display: flex; font-size: .3rem;">
                        <div>多选</div>
                        <div style="color: #b0b0b0;"><van-icon class-prefix="icon" name="youjiantou"></van-icon></div>
                    </div>
                </div>
                <div class="cutboxs" style="border:none;">
                    <div style="color: #b0b0b0;">抢票截止</div>
                    <div>发车前30分钟</div>
                    <div></div>
                    <div style="color: #00C9E2; display: flex; font-size: .3rem;">
                        <div>多选</div>
                        <div style="color: #b0b0b0;"><van-icon class-prefix="icon" name="youjiantou"></van-icon></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 追加 -->
        <div class="third-box">
            <div class="third-party">
                <div style="margin-top:.5rem;">
                    <div style="font-size: .4rem; margin: 0 0 0 .3rem;">推荐登录12306账号</div>
                    <div style="font-size: .3rem; color:#b0b0b0; margin: .1rem 0 0 .3rem">登录后专享极速出票特权</div>
                </div>
                <div style="margin-top:.7rem; margin-right: .3rem; font-size: .5rem; color: #b0b0b0;">
                    <van-icon class-prefix="icon" name="youjiantou"></van-icon>
                </div>
            </div>

            <div class="addition">
                添加乘客
            </div>

            <div class="cell-phone-number">
                <div style="margin:0 .3rem 0 .3rem ; font-size: .36rem;">联系手机</div>
                <div style="font-size: .45rem; color:#b0b0b0;">通知出票信息</div>
            </div>
        </div>

        <!-- 提示信息 与 下一步 -->
        <div class="next-step">
            <div class="hint">
                <div style=" margin: .3rem .3rem 0 .3rem;">根据铁路局规定，乘车人需填写真实有效的联系方式。</div>
                <div style=" margin: 0 .3rem 0 .3rem;">18岁以下和60岁以上乘客可填写亲友手机号。</div>
            </div>

            <div class="next-step-button">下一步</div>

        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            isRotated: false //是否已旋转
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
    }

};
</script>

<style scoped>
.van-nav-bar {
    background-color: #00C9E2;
}

/* 切换盒子 */
.Address-switching {
    width: 100%;
    height: 2rem;
    color: #fff;
    background-color: #00C9E2;
    display: flex;
}

.switchingbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: .4rem;

}

.icon-zhuanhuan {
    font-size: .8rem;
    line-height: 1.5rem;
}


/* 选项大盒子 */
.cut-bigbox {
    width: 100%;
    height: 6.6rem;
    background: linear-gradient(to bottom, #00C9E2, #F5F5F5);
}

/* 选项小盒子 */
.cut-smallbox {
    height: 6.5rem;
    margin: 0 .3rem 0 .3rem;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 0 1px 0 1px #c7c7c7;
    display: flex;
    flex-direction: column;
}

.cutboxs {
    height: 1.6rem;
    display: flex;
    justify-content: space-between;
    font-size: .4rem;
    line-height: 1.6rem;
    margin: 0 .3rem 0 .3rem;
    border-bottom: 1px solid #d7d7d7;
}


/* 选项添加 */
.third-box {
    width: 100%;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
}

/* 第三方 */
.third-party {
    height: 2rem;
    background-color: rgb(255, 255, 255);
    margin: .3rem .3rem 0 .3rem;
    border-radius: 10px;
    box-shadow: 0 1px 0 1px #c7c7c7;
    display: flex;
    justify-content: space-between;
}

/* 添加 */
.addition {
    height: 1.5rem;
    background-color: rgb(255, 255, 255);
    margin: .3rem .3rem 0 .3rem;
    border-radius: 10px;
    box-shadow: 0 1px 0 1px #c7c7c7;
    text-align: center;
    font-size: .4rem;
    line-height: 1.5rem;
    color: #00C9E2;

}

/* 手机号 */
.cell-phone-number {
    height: 1.2rem;
    background-color: rgb(255, 255, 255);
    margin: .3rem .3rem 0 .3rem;
    border-radius: 10px;
    box-shadow: 0 1px 0 1px #c7c7c7;
    display: flex;
    line-height: 1.2rem;
}

/* 下一步 */
.next-step {
    height: 4rem;
    background-color: #F5F5F5;
}

.hint {
    height: 1rem;
    display: flex;
    flex-direction: column;
}

.hint div {
    color: #b0b0b0;
}

.next-step-button {
    height: 1rem;
    background: linear-gradient(to right, #FE8824, #FC6711);
    margin: .7rem .3rem 0 .3rem;
    border-radius: 20px;
    text-align: center;
    font-size: .5rem;
    color: #fff;
    line-height: 1rem;

}
</style>